import React, { Component } from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { Table, Button, Message } from 'element-react'
import Pagination from '../base/Pagination'
import {withRouter} from 'react-router-dom'
import styled from 'styled-components'

class memberGrowList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      totalElements: 30,
      pageNo: 0,
      columns: [
        {
          label: '等级名称',
          prop: 'levelName',
          align: 'center'
        },
        {
          label: '达标条件（平台积分）',
          prop: 'standardCondition',
          align: 'center'
        },
        {
          label: '操作',
          prop: 'operate',
          align: 'center',
          render: (item) => {
            return (
              <span>
                <Button type="info" size="small" onClick={this.edit.bind(this, item)}>编辑</Button>
              </span>
            )
          }
        }
      ],
      data: [
        {
          name: '1',
          conditions: '2'
        }
      ]
    }
  }
  componentDidMount () {
    this.selectConsumerGrow({pageNo: 0, pageSize: 10})
  }
  selectConsumerGrow (data) {
    this.$ajax.selectConsumerGrow(data).then(res => {
      if (res.code === 200) {
        this.setState({data: res.data.content, totalElements: Number(res.data.totalElements)})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  increase () {
    this.props.history.push({
      pathname: '/memberGrowCreate',
      state: { fromDashboard: true }
    })
  }
  edit (item) {
    this.props.history.push({
      pathname: `/memberGrowEdit/${item.id}`,
      state: { fromDashboard: true }
    })
    window.sessionStorage.setItem('memberGrowItem', JSON.stringify(item))
  }
  changePage (value) {
    this.setState({pageNo: value - 1}, () => {
      this.selectConsumerGrow({pageNo: this.state.pageNo, pageSize: 10})
    })
  }
  render () {
    const TableClass = styled.div`
      margin-top: 40px;
    `
    return (
      <div className="memberGrowList">
        <Breadcrumb data={['会员', '成长规则']}/>
        <div className="inline-marginR-20"><button type="button" className="btn btn-increase" onClick={this.increase.bind(this)}>新增</button></div>
        <TableClass>
          <Table
              style={{width: '100%'}}
              columns={this.state.columns}
              data={this.state.data}
              border={true}
          />
        </TableClass>
        <Pagination total={this.state.totalElements} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}

export default withRouter(memberGrowList)